<template>
	<view class="order_opera_wrap">
		<view v-if="status === 3" class="time_left">订单锁定剩余时间：{{ timeLeftMins }}</view>
		<view v-if="status === 1" class="order_opera">立即上架</view>
		<view v-else-if="status === 2" class="order_opera">立即求购</view>
		<view v-else-if="status === 3" class="order_opera">立即购买</view>
	</view>
</template>
<script>
export default {
    props: {
		status: {
			type: Number,
			default: 0,  // 1:立即上架 2:立即求购 3:立即购买
		},
	},
	data() {
		return {
			timeLeft: 10 * 60,
            interval: null,
		};
	},

	computed: {
		timeLeftMins() {
			return `${`0${Math.floor(this.timeLeft / 60)}`.slice(-2)}:${`0${this.timeLeft % 60}`.slice(-2)}`;
		},
	},

	mounted() {
		if (this.status === 3) {
			this.interval = setInterval(() => {
				this.timeLeftTurn();
			}, 1000);
		}
	},

	methods: {
		timeLeftTurn() {
			if (this.timeLeft === 0) {
				this.timeLeft = 10 * 60;
                clearInterval(this.interval)
                this.interval = null
			} else {
				this.timeLeft--;
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.order_opera_wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 192rpx;

	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: column;

	.time_left {
		width: 100%;
		height: 52rpx;
		background-color: #08194a;
		color: white;
		font-size: 24rpx;
		text-align: center;
		line-height: 52rpx;
	}

	.order_opera {
		width: 100%;
		height: 140rpx;
		background-color: #1952f8;
		color: white;
		font-weight: bold;
		font-size: 40rpx;
		text-align: center;
		line-height: 140rpx;
	}
}
</style>
